<script setup lang="ts">
import { fetchIssuingInvoicesHistoryDetailAPI } from '@/apis/fetchIssuingInvoicesHistoryDetail'
import { useUserInfoStore } from '@/store/userInfo'
import type { IssuingInvoicesHistoryItemDetailData } from '@/types/api'
import { InvoiceTitleType } from '@/types/enum'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const selectedTabIndex = ref(0)
const tabConfiguration = ['发票信息', '发票行程']

const detail = ref<IssuingInvoicesHistoryItemDetailData>()

const statusName = computed(() => {
  if (!detail.value?.status)
    return '未知'
  return detail.value.status.toString() === '1' ? '未开票' : '已开票'
})

const titleType = computed(() => {
  if (!detail.value?.type)
    return '未知'
  return detail.value.type === InvoiceTitleType.enterprise ? '企业' : '个人'
})

onLoad(async (options) => {
  if (!options?.id)
    return
  const res = await fetchIssuingInvoicesHistoryDetailAPI({
    id: options.id,
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1)
    return
  detail.value = res.data.data
})

function handleViewMoreInfo() {
  router.push({
    name: 'issuingInvoicesMoreInfo',
    params: {
      info: JSON.stringify({
        address: detail.value?.address,
        mobile: detail.value?.mobile,
        bank: detail.value?.bank,
        bank_account: detail.value?.bank,
        remark: detail.value?.remark,
      }),
    },
  })
}
</script>

<template>
  <Tabs
    :selected-index="selectedTabIndex"
    :items="tabConfiguration"
    @change="(i: number) => selectedTabIndex = i"
  />
  <block v-if="selectedTabIndex === 0">
    <view class="flex flex-col items-center bg-white">
      <Spacer height="72" />
      <view class="text-24rpx text-#999999 font-medium">
        当前状态
      </view>
      <Spacer height="26" />
      <view class="text-50rpx text-#333333 font-bold leading-50rpx">
        {{ statusName }}
      </view>
      <Spacer height="96" />
    </view>
    <view class="p-24rpx text-28rpx text-#999999 font-medium leading-28rpx">
      接收信息
    </view>
    <view class="bg-white">
      <ListCell>
        <template #label>
          <view class="text-28rpx text-#999999 leading-40rpx">
            电子邮箱
          </view>
        </template>
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          {{ detail?.email || '未知' }}
        </view>
      </ListCell>
    </view>
    <view class="flex items-center justify-between p-24rpx text-28rpx text-#999999 font-medium leading-28rpx">
      <text>发票信息</text>
      <text @tap="handleViewMoreInfo">
        更多信息>
      </text>
    </view>
    <view class="bg-white">
      <ListCell>
        <template #label>
          <view class="text-28rpx text-#999999 leading-40rpx">
            抬头类型
          </view>
        </template>
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          {{ titleType }}
        </view>
      </ListCell>
      <Divider width="702" />
      <ListCell>
        <template #label>
          <view class="text-28rpx text-#999999 leading-40rpx">
            发票抬头
          </view>
        </template>
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          {{ detail?.invoice_title || '未知' }}
        </view>
      </ListCell>
      <Divider width="702" />
      <ListCell>
        <template #label>
          <view class="text-28rpx text-#999999 leading-40rpx">
            纳税人识别号
          </view>
        </template>
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          {{ detail?.ratepay_number || '未知' }}
        </view>
      </ListCell>
      <Divider width="702" />
      <ListCell>
        <template #label>
          <view class="text-28rpx text-#999999 leading-40rpx">
            发票金额
          </view>
        </template>
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          {{ detail?.money || '0' }}元
        </view>
      </ListCell>
      <!-- <Divider width="702" />
      <ListCell>
        <template #label>
          <view class="text-28rpx text-#999999 leading-40rpx">
            发票内容
          </view>
        </template>
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          缺少字段
        </view>
      </ListCell> -->
      <Divider width="702" />
      <ListCell>
        <template #label>
          <view class="text-28rpx text-#999999 leading-40rpx">
            申请时间
          </view>
        </template>
        <view class="text-28rpx text-#333333 font-medium leading-28rpx">
          {{ detail?.create_time || '未知' }}
        </view>
      </ListCell>
    </view>
  </block>
  <block v-if="selectedTabIndex === 1">
    <view class="bg-#FFFCEC p-24rpx text-28rpx text-#F53B25 leading-28rpx">
      1张发票，含{{ detail?.trips_num || '0' }}个行程
    </view>
    <Spacer height="20" />
    <Trip
      v-for="o in detail?.order"
      :key="o.id"
      :type="detail?.order_type === 1 ? 'intercity' : 'normal'"
      :time="o.start_time"
      :order-type="o.type"
      :from="o.start_place"
      :to="o.end_place"
      :price="o.pay_money"
    />
  </block>
</template>

<route lang="yaml">
name: 'issuingInvoicesDetail'
style:
  navigationBarTitleText: '开票详情'
</route>
